<template>
  <view class="flex justify-start">
    <view class="m-4 mt-8">
      <view class="flex flex-col items-center">
        <view class="text-xl">04</view>
        <view class="label">3月/周二</view>
      </view>
    </view>
    <view class="p-4 rounded-lg shadow-md flex-1 mr-4 bg-white dark:bg-black">
      <view class="flex justify-between items-center mb-2">
        <view class="text-lg font-bold">{{ title }}</view>
      </view>
      <view class="text-gray-600">{{ content }}</view>
      <template v-if="images.length === 1">
        <view :style="{ backgroundImage: `url(${images[0]})` }"
          class="mt-2 w-full h-32 bg-cover bg-center bg-no-repeat">
        </view>
      </template>
      <template v-else-if="images.length > 1">
        <view class="flex mt-2 h-20">
          <view v-for="(image, index) in images.slice(0, 3)" :key="index" :style="{ backgroundImage: `url(${image})` }"
            class="w-1/3 h-full bg-cover bg-center bg-no-repeat m-1">
          </view>
        </view>
      </template>
      <view class="mt-2 flex">
        <view class="text-gray-500">{{ publishTime }}</view>
        <view class="ml-2"></view>
        <view class="text-gray-500">{{ weather }}</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      required: true
    },
    images: {
      type: Array,
      default: () => []
    },
    date: {
      type: String,
      required: true
    },
    publishTime: {
      type: String,
      required: true
    },
    weather: {
      type: String,
      required: true
    }
  }
}
</script>